<template>
  <div class="messageDetail">
    <iu-header>
      <template #left>
        <x-icon
          @click="spotCheckView"
          type="ios-arrow-back"
          size="21"
          fill="#fff"
        ></x-icon>
      </template>
      <template #title>
        {{ isEdit ? "编辑" : isSignature ? "详情" : "新增" }}
      </template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <div class="safety-approve-nfo">
      <div class="info-list">
        <div class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">作业类型：</span>
          </div>
          <div class="contentRight border">
            <selector
              :readonly="!!id"
              class="selector"
              placeholder="全部通知"
              v-model="view"
              :options="list"
            ></selector>
          </div>
        </div>
      </div>
    </div>
    <component
      :is="view"
      :type-list="list"
      :view="view"
      @onShowImg="eventShowImg"
    ></component>
    <showImg
      :list="fileList"
      :index="showImgIndex"
      :show.sync="showImg"
    ></showImg>
  </div>
</template>

<script>
import { XImg, Selector } from "vux";
import showImg from "@/components/common/showImg/showImg";
import iuHeader from "@/components/common/header/index";
import Organization from "@/components/common/replace/sellWorkOrderDepartment";
import donghuo from "./operationAssignments/donghuo";
import shouxian from "./operationAssignments/shouxian";
import gaochu from "./operationAssignments/gaochu";
import diaozhuang from "./operationAssignments/diaozhuang";
import duanlu from "./operationAssignments/duanlu";
import dongtu from "./operationAssignments/dongtu";
import linshiyongdian from "./operationAssignments/linshiyongdian";
import mangbanchoudu from "./operationAssignments/mangbanchoudu";
import SafetyManageDao from "@/daos/safety_manage_dao";

import { Privilege, GetUser } from "@/mixin";
export default {
  inject: ["backToHomepage"],
  components: {
    XImg,
    Selector,
    Organization,
    donghuo,
    shouxian,
    gaochu,
    diaozhuang,
    duanlu,
    dongtu,
    linshiyongdian,
    mangbanchoudu,
    showImg,
    iuHeader
  },
  data() {
    return {
      buttonShow: false,
      detail: {},
      view: "donghuo",
      list: [
        { key: "donghuo", value: "动火安全作业证" },
        { key: "shouxian", value: "受限空间安全作业证" },
        { key: "gaochu", value: "高处安全作业证" },
        { key: "diaozhuang", value: "吊装安全作业证" },
        { key: "duanlu", value: "断路安全作业证" },
        { key: "dongtu", value: "动土安全作业证" },
        { key: "linshiyongdian", value: "临时用电安全作业证" },
        { key: "mangbanchoudu", value: "盲板抽堵安全作业证" }
      ],
      form: {
        type: ""
      },
      workSheet: {},
      fileList: [],
      showImgIndex: 0,
      showImg: false,
      imgUrl: "",
      showDialog: false,
      showDialogImg: false,
      id: "",
      status: 0
    };
  },
  activated() {
    this.id = this.$route.query.id || 0;
    if (!this.user) {
      this.getUserInfo();
    } else {
      this.init();
    }
  },
  created() {},
  computed: {
    user() {
      return this.$store.state.user;
    },
    userServiceArea() {
      if (this.$store.state.user) {
        let serviceAreaTree = this.$store.state.user.serviceAreaTree;
        serviceAreaTree.departmentName = "选择部门";
        serviceAreaTree.id = "";
        return serviceAreaTree;
      } else {
        return {};
      }
    },
    safeExamineDetail() {
      return this.$store.state.safetyCheck.safeExamineDetail;
    },
    isEdit() {
      return (
        (this.safeExamineDetail.state === 1 ||
          this.safeExamineDetail.state === 3) &&
        this.safeExamineDetail.userId === (this.user && this.user.id)
      );
    },
    isSignature() {
      return (
        this.safeExamineDetail.state === 4 || this.safeExamineDetail.state === 2
      );
    }
  },
  mixins: [Privilege, GetUser],
  methods: {
    init() {
      if (this.id) {
        this.getSafeExamine(this.id);
      }
    },
    getUserInfo() {
      this.$http(this.$API.getUserInfo, {}).then(res => {
        this.$store.commit("saveUser", res);
        this.init();
      });
    },
    spotCheckView() {
      history.back(-1);
    },
    eventTypeChange(value) {
      console.log(value);
    },
    getSafeExamine(id) {
      SafetyManageDao.getSafeExamine({ id, userId: this.user.id }, res => {
        if (res) {
          this.$store.commit("setSafeExamineDetail", res);
          this.type = res.type;
          this.view = this.list[this.type - 1].key;
        }
      });
    },
    show(index) {},
    eventShowImg(file) {
      this.fileList.splice(0, this.fileList.length, file);
      this.showImgIndex = 0;
      this.showImg = true;
    }
  }
};
</script>

<style lang="less" scoped>
.messageDetail {
  box-sizing: border-box;
  height: auto;
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: #18182c;
}

.timeLine {
  display: flex;
  color: #fff;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
<style lang="less">
.safety-approve-nfo {
  height: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  &.is-details {
    .vux-x-icon {
      opacity: 0;
    }
  }
  .vux-selector {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    select {
      color: #fff;
    }
    option {
      color: #000;
    }
  }
  .info-list {
    margin: 8px;
    background: #22233f;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 8px;
    .info-list-item {
      display: flex;
      flex-wrap: wrap;
      line-height: 20px;
      margin: 8px 0;
    }
    .info-title {
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      // margin-right: 30px;
      width: 135px;
      text-align: right;
    }

    .info-value {
      flex: 1;
      font-size: 16px;
      color: #fff;
      img {
        max-width: 100px;
        height: auto;
        margin-bottom: 8px;
        margin-right: 8px;
      }
    }
    .contentList {
      padding: 8px 0;
      overflow: hidden;
      // border-bottom: 1px solid #464656;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      &.full {
        flex-wrap: wrap;
        .contentRight {
          width: 100%;
          margin-top: 3px;
        }
      }
      .contentLeft,
      .contentRight {
        font-size: 14px;
      }
      .contentLeft {
        color: rgba(255, 255, 255, 0.6);
        flex: none;
      }
      .contentRight {
        position: relative;
        color: #fff;
        box-sizing: border-box;
        width: 55%;
        &.border {
          border-bottom: 0.026667rem solid #464656;
          display: flex;
          justify-content: space-between;
          // align-items: center;
        }
        .annex {
          margin-top: 8px;
          img {
            width: 80px;
            height: auto;
          }
        }
        .select-user-right {
          display: flex;
          align-items: center;
          label {
            color: rgba(255, 255, 255, 0.6);
          }
        }
        .esign-sort {
          width: 30px;
        }
        input {
          // text-align: right;
          touch-action: none;
          width: 90%;
          border: 0;
          color: #ffffff;
          margin-right: 4px;
          font-size: 14px;
          &.full {
            width: 100%;
          }
          &::-webkit-input-placeholder {
            color: #6f6f77 !important;
            text-align: left;
          }
        }
        .userQuestion {
          font-size: 14px;
          width: 100%;
          height: 100px;
          border-radius: 6px;
          padding: 10px;
          box-sizing: border-box;
          background-color: transparent;
          border: 1px solid #747480;
          color: #fff;
          text-align: left !important;
        }
        .userQuestion::-webkit-input-placeholder {
          color: #6f6f77;
          text-align: left;
        }
        input::placeholder,
        textarea:-moz-placeholder {
          color: rgb(111, 111, 119) !important;
          opacity: 1;
        }
        .select-user {
          flex: 1;
        }
        .checkbox-list {
          color: rgba(255, 255, 255, 0.8);
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;
          > div {
            width: 90%;
            flex: none;
          }
          .contenteditable {
            display: inline-block;
            min-width: 20px;
            text-align: center;
            margin: 0;
            border-bottom: 1px solid #495889;
          }
          .input-text {
            width: 20px;
            border-bottom: 1px solid #495889;
            margin: 0;
            text-align: center;
          }
          input.checkbox {
            width: 4%;
            height: 20px;
            flex: none;
          }
          .contentLeft {
            width: 100%;
            flex: 1;
          }
          .contentRight {
            width: 55%;
            flex: none;
          }
        }
      }
      .cancelPos {
        position: static;
        width: auto !important;
      }
      .notNull {
        color: #d81e06;
      }
      .err-msg {
        flex: none;
        width: 100%;
        color: #ff2c2c;
        font-size: 12px !important;
        padding-left: 35%;
        -webkit-text-size-adjust: 100% !important;
      }
    }
  }
  .info-other-title {
    padding: 0 16px;
    color: #fff;
    font-size: 16px;
  }

  .esign-btn {
    max-width: 40px;
    text-align: center;
    padding: 2px 6px;
    margin-top: 6px;
    height: 20px;
    background: #2550d1;
    color: #fff;
    font-size: 14px;
    border-radius: 20px;
    &.warning {
      background: #ec7f25;
    }
  }
  .processWrap {
    // width: 100%;
    margin: 32px 0;
    display: flex;
    justify-content: space-between;
    > div {
      margin: 0 8px;
      flex: 1;
    }
    button {
      height: 40px;
      width: 100%;
      background-color: #2c386eff;
      border: none;
      color: #fff;
      font-size: 16px;
      left: 15%;
    }
  }
  .esign-fullscreen {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transform-origin: bottom left;
    background-color: #23233d;
  }
}
.safety-approve-nfo {
  .contentRight {
    .header-content {
      justify-content: space-between !important;
      .name {
        font-size: 14px;
      }
    }
  }
  .selector {
    width: 100%;
    font-size: 14px;
    background-color: transparent;
    select {
      color: #fff;
    }
    option {
      color: #000;
    }
    .weui-select {
      height: 30px;
      line-height: 30px;
      padding-left: 0;
    }
    .vux-selector-readonly {
      text-align: left;
    }
    .weui-cell_select .weui-cell__bd::after {
      right: 10px;
      height: 10px;
      width: 10px;
      border-width: 2px 2px 0 0;
      border-color: #fff;
    }
  }
}
</style>
